<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        .BMap_bubble_content{
          font-size: 20px;
        }
    </style>
   
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
        <script src="js/common.js"></script>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=aFqCPtpojVHT0Rq3q1IoENx2"></script>
    <title>测距</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
        appcan.ready(function() {
            uexLocation.onChange = onChange;
            uexLocation.cbOpenLocation = cbOpenLocation; 
            uexLocation.openLocation();
            $toast("正在加载地图和定位...",5000);
        });

 // 百度地图API功能
    var map = new BMap.Map("allmap");
    var pointA = new BMap.Point(116.302568,39.963903);  // 创建点坐标A--大渡口区
    var pointB = new BMap.Point(116.302568,39.963903);  // 创建点坐标B--江北区
    var pointCenter = new BMap.Point((pointA.lng+pointB.lng)*0.5,(pointA.lat+pointB.lat)*0.5);
    map.centerAndZoom(pointCenter,12);
    
    

    
    var markerA = new BMap.Marker(pointA);// 创建标注
    map.addOverlay(markerA);             // 将标注添加到地图中
    markerA.enableDragging();           // 可拖拽
 
    var markerB = new BMap.Marker(pointB);// 创建标注
    map.addOverlay(markerB);             // 将标注添加到地图中
    markerB.enableDragging();           // 可拖拽
    
    
    
   
   // alert('从大渡口区到江北区的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
    var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
    map.addOverlay(polyline);     //添加折线到地图上
    //polyline.enableClicking();
    var infoWindow = new BMap.InfoWindow("相距"+map.getDistance(pointA,pointB).toFixed(2)+"米<br>您可以点击重新计算！");
    map.openInfoWindow(infoWindow,pointCenter); //开启信息窗口
    
    var flag=true;
    map.addEventListener("click",function(e){
        alert("坐标为："+e.point.lng + "," + e.point.lat);
        if(flag){
          markerA.setPosition(new BMap.Point(e.point.lng,e.point.lat));
          flag=false;
        }else{
          markerB.setPosition(new BMap.Point(e.point.lng,e.point.lat));
          flag=true;
          calculate();
        }
        
        
    });
    
    markerA.addEventListener("dragend",function(){calculate();});
    markerB.addEventListener("dragend",function(){calculate();});
    markerA.addEventListener("click",function(){map.openInfoWindow(infoWindow,pointCenter); });
    markerB.addEventListener("click",function(){map.openInfoWindow(infoWindow,pointCenter); });
    //document.getElementById("r-result").innerHTML = "信息窗口的内容是：<br />" + infoWindow.getContent();
    
 
function calculate(){
    pointA=markerA.getPosition();
    pointB=markerB.getPosition();
    pointCenter = new BMap.Point((pointA.lng+pointB.lng)*0.5,(pointA.lat+pointB.lat)*0.5);
    map.centerAndZoom(pointCenter,12);
    polyline.setPositionAt(0,pointA);
    polyline.setPositionAt(1,pointB);
    infoWindow.setContent("相距"+map.getDistance(pointA,pointB).toFixed(2)+"米<br>您可以点击重新计算！");
    map.openInfoWindow(infoWindow,pointCenter); //开启信息窗口
}

   function cbOpenLocation(opId, dataType, data){
        $toast("正在定位...",2000);
    }
   
   
   var first=true;
   function onChange(lat, log){//http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=aFqCPtpojVHT0Rq3q1IoENx2
        $toast("坐标重新获取:"+lat+","+log,2000);
        point=new BMap.Point(log, lat);
        if(first){
           map.centerAndZoom(point,12);
           first=false;
        }

    }


</script>
